<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
      .card {
        display: flex;
        column-gap: 10px;
      }
      
      .card-son {
        width: 200px;
        height: 50px;
        padding: 10px;
        margin: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: darkgray;
        background: pink;
      }
    </style>
  </head>
  
  <body>
    <div id="app">
      <!-- [Vue warn]: Property "index" was accessed during render but is not defined on instance. -->
      <div class="card">
        <div v-if="index!=0" v-for="(item,index) in itemsArr" class="card-son">{{index}}</div>
      </div>
      
      <!-- v-if的优先级比v-for的优先级更高，v-if无法访问v-for遍历产生的item、key和index解决方案如下 -->
      <div class="card">
        <template v-for="(item,index) in itemsArr">
          <div v-if="index!=0" class="card-son">{{index}}</div>
        </template>
      </div>
    </div>
  </body>
  
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  
  <script>
    Vue.createApp({
      data() {
        return {
          itemsArr: [
            {
              label: '一',
              value: 'One'
            },
            {
              label: '二',
              value: 'Two'
            },
            {
              label: '三',
              value: 'Three'
            },
            {
              label: '四',
              value: 'Four'
            },
            {
              label: '五',
              value: 'Five'
            },
            {
              label: '六',
              value: 'Six'
            },
          ],
        };
      }
    }).mount('#app');
  </script>
</html>